<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich" >
    
    <f:view contentType="text/html">
    
    	<h:head>
			<title>UsaPré</title>
			<ui:insert name="js"/>
			<ui:insert name="css"/>
			
		</h:head>	
		
		<h:body>
		
				<a4j:status onstart="#{rich:component('statPane')}.show()" onstop="#{rich:component('statPane')}.hide()" /> 
				<rich:popupPanel id="statPane" autosized="true"> 
					<h:outputText value="Aguarde..." styleClass="output-style"/> 
				</rich:popupPanel> 
				
				<h:panelGroup id="mensagens">
					<h:outputScript rendered="#{not empty facesContext.messageList}">
						<a4j:repeat value="#{facesContext.messageList}" var="message">
							alert("<h:outputText value="#{message.summary}" />");
						</a4j:repeat>
					</h:outputScript>
				</h:panelGroup>
				
				<div class="conteiner">
					<div class="topo">
				        <div class="logo" align="center">
				        	<ui:insert name="linkusa"></ui:insert>
				        </div>
				        <div class="divisor"><img src="images/divisor_vertical_topo.gif" width="2" height="96" /></div>
				        <div class="menu_sup">
				       	  <div class="menu_sup_text" align="center">
				       	  	<ui:insert name="linksup1"></ui:insert>
				       	  </div>
						</div>
				        <div class="divisor"><img src="images/divisor_vertical_topo.gif" width="2" height="96" /></div>
				        <div class="menu_sup">
				          <div class="menu_sup_text_" align="center">
				          	<ui:insert name="linksup2"></ui:insert>
				          </div>
				      </div>
				        <div class="divisor"><img src="images/divisor_vertical_topo.gif" width="2" height="96" /></div>
				        <div class="menu_sup">
				          <div class="menu_sup_text" align="center">
				          	<ui:insert name="linksup3"></ui:insert>
				          </div>
				        </div>
				        <div class="divisor"><img src="images/divisor_vertical_topo.gif" width="2" height="96" /></div>
				        <div class="menu_sup">
				          <div class="menu_sup_text_" align="center">
				          	<ui:insert name="linksup4"></ui:insert>
				          </div>
				        </div>
				        <div class="divisor"><img src="images/divisor_vertical_topo.gif" width="2" height="96" /></div>
				        <div class="menu_login">
				       	  <ui:insert name="login"></ui:insert>
				        </div>
					</div>
				    <div class="banner"><img src="images/banner.jpg" width="1000" height="160" /></div>
				    <div class="submenu_area">
				   	  	<div class="conteiner_submenu">
				   	  		<ui:insert name="conteiner1"></ui:insert>
				    	</div>
				        <div class="conteiner_submenu">
				        	<ui:insert name="conteiner2"></ui:insert>
				        </div>
				      	<div class="conteiner_submenu">
				      		<ui:insert name="conteiner3"></ui:insert>
				        </div>
				      	<div class="conteiner_submenu">
				      		<ui:insert name="conteiner4"></ui:insert>
				        </div>
				      	<div class="conteiner_submenu">
				      		<ui:insert name="conteiner5"></ui:insert>
				        </div>
				    </div>
				  <div class="submenu_area2">
				    <div class="img"><img src="images/banner_quadrado.jpg" alt="" width="251" height="304" /></div>
				    <div class="dynamic">
				    	<h:form>
				    	
				    	<div class="dyn_inside" align="center"><img src="images/img.gif" width="230" height="151" /></div>
				    	<div class="dyn_inside2" align="center"><img src="images/selecione.gif" width="382" height="24" />
					        <div class="campos">
					          <label for="select"></label>
					          
					          <h:selectOneMenu value="#{descontoBean.ramoAtividade}" converter="ramoAtividadeConverter" style="width:160px">
		      	      			<f:selectItem itemLabel="Ramo de Atividade" noSelectionOption="true" />	
			          			<f:selectItems value="#{descontoBean.ramoAtividades}" var="rm" itemLabel="#{rm.nome}" itemValue="#{rm}" />
			          		</h:selectOneMenu>
					          
					        </div>
					        <div class="campos">
					          <label for="textfield"></label>
					          <rich:inplaceInput defaultLabel="Nome do Estabelecimento" value="#{descontoBean.nomeEstabelecimento}" style="width:155px" />
					        </div>
					        <div class="campos">
					          
					          <h:selectOneMenu value="#{descontoBean.uf}" converter="ufConverter" style="width:160px" >
			          			<f:selectItem itemLabel="UF" noSelectionOption="true" />
			          			<f:selectItems value="#{descontoBean.ufs}" var="uf" itemLabel="#{uf.sigla}" itemValue="#{uf}" />
			          			<f:ajax event="change" listener="#{descontoBean.atualizaCidade}" render="cidadeField" />
			          		</h:selectOneMenu>
					          
					        </div>
					        <div class="campos">
					        
					          <h:selectOneMenu id="cidadeField" value="#{descontoBean.cidade}" converter="cidadeConverter" style="width:160px">
		       	    			<f:selectItem itemLabel="Selecione a Cidade" noSelectionOption="true" />
			          			<f:selectItems value="#{descontoBean.cidades}" var="cidade" itemLabel="#{cidade.nome}" itemValue="#{cidade}" />
			          			<f:ajax event="change" listener="#{descontoBean.atualizaBairro}" render="bairroField" />
			          		</h:selectOneMenu>
					          
					        </div>
					        <div class="campos">
					          
					          <h:selectOneMenu id="bairroField" value="#{descontoBean.bairro}" converter="bairroConverter" style="width:160px">
		       	    			<f:selectItem itemLabel="Selecione o Bairro" noSelectionOption="true" />
			          			<f:selectItems value="#{descontoBean.bairros}" var="bairro" itemLabel="#{bairro.nome}" itemValue="#{bairro}" />
			          		</h:selectOneMenu>
					          
					        </div>
					        <div class="campos" align="right">
					        	<a4j:commandLink action="#{descontoBean.buscarCompreComDesconto}" execute="@form" >
					        		<img src="images/enviar.gif" width="61" height="19" />
					        	</a4j:commandLink>
					        </div>
					        
				        
				        </div>
				        </h:form>
				    </div>
			  	<img src="images/o_que_acontece.gif" width="301" height="43" />
		  			<div class="dynamic_part">
				  		<h:form>
			  			<div id="sidebar">
						    <ul class="spy">
						    
						    	<a4j:repeat value="#{noticiasBean.noticias}" var="noticia">
						    	
						    		<li>
							        	<table width="278">
							        		<tr>
							        			<td height="44" class="dynamic_part_inside_in1"><h:outputText value="#{noticia.dado1Simpl}" /></td>
							        			<td class="dynamic_part_inside_in2"><h:outputText value="#{noticia.dado2}" /></td>
							        			<td class="dynamic_part_inside_in3">
							        				<h:outputText value="#{noticia.dado5}" >
							        					<f:convertNumber type="currency" locale="pt-BR"  />
							        				</h:outputText>
							        			</td>
							        			<td class="dynamic_part_inside_in4">
							        				<h:outputText value="#{noticia.dado6}" >
							        					<f:convertNumber maxFractionDigits="2" locale="pt-BR" />
							        				</h:outputText>%
							        			</td>
							        		</tr>
							        	</table>
							        
							        </li>
						    	
						    	</a4j:repeat>
						    
						    </ul>
						</div>    
					  	
					  		<img src="images/somente_usacard_01.jpg" width="170" height="26" />
					  		
					  		<a4j:commandLink action="#{descontoBean.descontosTela}">
					  			<img src="images/somente_usacard_02.gif" width="115" height="26" />
					  		</a4j:commandLink>	
					  	</h:form>	
				  	</div>
				  </div>
				  
				  <div class="over_rodape"></div>
				  
				  <div class="rodape">
					<div class="rodape_part1"><img src="images/rodape1.gif" width="246" height="57" /></div>
					<div class="rodape_separador"></div>
					<div class="rodape_part2">
					
						<img src="images/rodape2_over_01.jpg" alt="" width="400" height="13" />
						<a href="#" onmouseout="jQuery('#imgtwitterin').show(); jQuery('#imgtwitterout').hide();" onmouseover="jQuery('#imgtwitterin').hide(); jQuery('#imgtwitterout').show();" >
							<img src="images/rodape2_normal_02.jpg" id="imgtwitterin"  width="95" height="44" border="0" />
							<img src="images/rodape2_over_02.gif"   id="imgtwitterout" width="95" height="44" border="0" style="display:none;" />
						</a>
						<a href="#" onmouseout="jQuery('#facebookin').show(); jQuery('#facebookout').hide();" onmouseover="jQuery('#facebookin').hide(); jQuery('#facebookout').show();" >
							<img src="images/rodape2_normal_03.jpg" id="facebookin" alt="" width="95" height="44" border="0" />
							<img src="images/rodape2_over_03_.gif"  id="facebookout" alt="" width="95" height="44" border="0" style="display:none;" />
						</a>
						<a href="#" onmouseout="jQuery('#mugbeein').show(); jQuery('#mugbeeout').hide();" onmouseover="jQuery('#mugbeein').hide(); jQuery('#mugbeeout').show();" >
							<img src="images/rodape2_normal_04.jpg" id="mugbeein" width="117" height="44" border="0" />
							<img src="images/rodape2_over_04.jpg"   id="mugbeeout" width="117" height="44" border="0" style="display:none;" />
						</a>
						<a href="#" onmouseout="jQuery('#youtubein').show(); jQuery('#youtubeout').hide();" onmouseover="jQuery('#youtubein').hide(); jQuery('#youtubeout').show();" >
							<img src="images/rodape2_normal_05.jpg" id="youtubein" width="79" height="44" border="0" />
							<img src="images/rodape2_over_05.jpg"   id="youtubeout" width="79" height="44" border="0" style="display:none;" />
						</a>
					
					
					</div>
					<div class="rodape_separador"></div>
				    <div class="rodape_part3">SAC/OUVIDORIA 0300-210-4001</div>
				  </div>
				  
				</div>
			
			
				
			
		
		</h:body>
		
	</f:view>
	
</ui:composition>